<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> {{title}} </title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

<!--
<script>

var mListIndex;

$('#busList').on('click','li', function(){
	mListIndex = $(this).index();
	$.mobile.changePage("#diningdetails",{data: {index:mListIndex}})
	
});
</script>
-->
</head>

<body>
<div data-role="page" id="dining">
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1>Just Bytes</h1>
</div>

<div data-role="content">
<ul id="busList" data-role="listview" data-theme="c" data-inset="true" data-filter="true">
{% for be in beList %}
<li><a href="./diningdetails?name={{ be.name}}"><img src="/icons?businessName={{ be.name }}" class="ui-li-thumb"/><h2 class="ui-li-heading">{{ be.name }}</h2>
<p class="ui-li-desc" >{{ be.address }} <br>{{ be.phoneNumber }}</p></a>
</li>
{% endfor %}
</ul>
</div>

<div data-role="footer">
{{ year }} &copy; {{ title }}.
</div>
</div>




</body>

</html>